﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Smith Editor</title>
    <link href="smitheditor.css" rel="stylesheet" type="text/css" />
    <script src="smitheditor.js" type="text/javascript"></script>
    <style type="text/css">
    body{ color:#393939; font-family: 'Segoe UI', Verdana, Arial, Tahoma; font-size: 13px; margin:0; padding:10px 20px; }
    h1,h2,h3,h4,h5,h6{ line-height:normal; margin:0; } h1{ font-size:18px; padding:8px 0; } h3{ font-size: 13px; padding:5px 0; } p{ margin:0; padding:3px 0; }
    input{ margin:5px; padding:2px 3px; } span{ margin-right:10px; }
    .section{ border-bottom:1px dashed #efefef; margin:5px 0 0 0; padding:10px 0; }
    .code{ background:#efefef; color:#090909; font-family:Consolas, 'Courier New'; font-size:12px; display:block; line-height:20px; margin:5px 0; padding:8px; }
    .footer{ margin:20px 0 160px 0;}
    </style>
</head>
<body>
    <h1>Smith Editor</h1>
    <p>
        <span>Author: John Smith</span>
        <span>Version: 1</span>
        <span>License: GPL</span>
    </p>
    <div>
        <p>Smith Editor is to convert a textarea to WYSIWYG editor.</p>
        <p>To use this control, first include the css file &quot;smitheditor.css&quot; and javascript file &quot;smitheditor.js&quot; in the head of your html page.</p>
        <div class="code">        
            &lt;link href=&quot;smitheditor.css&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />
            &lt;script src=&quot;smitheditor.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        </div>
    </div>
    <div class="section">
        <h3>Example</h3>
        <textarea id='tx1'><strong>Smith Html Editor for Web Client</strong></textarea>
        <div>
            <a href="#" onclick="alert(ed.html());" title="Get html content.">HTML</a>
            <a href="#" onclick="alert(ed.text());" title="Get text content.">TEXT</a>
            <a href="#" onclick="ed.post();" title="Put html content into textarea.">POST</a>
            <a href="#" onclick="alert(tx1.value);" title="Get value in textarea.">VALUE</a>
        </div>
    </div>
    <div class="footer">        
        <p><strong>Any help and suggestion for improving this control is welcome!</strong></p>
        <p>you can contact me with this email: <a href="mailto:john.smith.17th@gmail.com">john.smith.17th@gmail.com</a></p>
        <p>Last edit at 2011/07/14 by John Smith.</p>
    </div>
    <script type="text/javascript">
        var ed = new SmithEditor('tx1', { width: 720, height: 320 });
    </script>
</body>
</html>
